<template>
  <div class="roll-call-container">
    <div class="roll-call-card">
      <button class="close-button" @click="closeRollCall">×</button>
      <h1 class="title">🎲 随机点名</h1>
      
      <!-- 3D学生头像球体 -->
      <div v-show="!showResult" class="student-sphere-container">
        <div 
          ref="sphere"
          class="student-sphere"
          :class="{ 'spinning': isSpinning }"
        >
          <div 
            v-for="(student, index) in students" 
            :key="student.id"
            class="student-avatar"
            :style="get3DAvatarPosition(index)"
          >
            <img :src="student.avatar" :alt="student.name" />
            <span class="student-name">{{ student.name }}</span>
          </div>
        </div>
      </div>
      
      <!-- 抽取控制 -->
      <div v-show="!showResult" class="control-section">
        <div class="input-group">
          <label for="studentCount">抽取人数：</label>
          <input 
            type="number" 
            id="studentCount"
            v-model.number="selectedCount" 
            min="1" 
            :max="students.length"
            class="count-input"
          />
        </div>
        
        <button 
          @click="selectRandomStudents" 
          class="select-btn"
          :disabled="isSelecting"
        >
          {{ isSelecting ? '抽取中...' : '随机抽取' }}
        </button>
      </div>
      
      <!-- 结果展示 -->
      <div v-if="showResult" class="result-section">
        <h2>抽取结果</h2>
        <div class="selected-students">
          <div 
            v-for="student in selectedStudents" 
            :key="student.id"
            class="selected-student"
          >
            <img :src="student.avatar" :alt="student.name" />
            <span class="student-name">{{ student.name }}</span>
          </div>
        </div>
        <button @click="resetRollCall" class="reset-btn">重新抽取</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RollCall',
  emits: ['close'],
  data() {
    return {
      isSpinning: true, // 控制球体旋转动画
      rotationX: 0, // X轴旋转角度
      rotationY: 0, // Y轴旋转角度
      selectedCount: 10, // 默认抽取人数改为10人
      isSelecting: false, // 是否正在抽取
      showResult: false, // 是否显示结果
      selectedStudents: [], // 已抽取的学生
      students: [
        // 预制30个学生名单
        { id: 1, name: '张三', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 2, name: '李四', avatar: '../../src/assets/images/1002.jpeg' },
        { id: 3, name: '王五', avatar: '../../src/assets/images/1003.jpeg' },
        { id: 4, name: '赵六', avatar: '../../src/assets/images/1004.jpeg' },
        { id: 5, name: '钱七', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 6, name: '孙八', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 7, name: '周九', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 8, name: '吴十', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 9, name: '郑一', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 10, name: '王二', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 11, name: '冯三', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 12, name: '陈四', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 13, name: '褚五', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 14, name: '卫六', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 15, name: '蒋七', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 16, name: '沈八', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 17, name: '韩九', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 18, name: '杨十', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 19, name: '朱一', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 20, name: '秦二', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 21, name: '尤三', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 22, name: '许四', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 23, name: '何五', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 24, name: '吕六', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 25, name: '施七', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 26, name: '张八', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 27, name: '孔九', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 28, name: '曹十', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 29, name: '严一', avatar: '../../src/assets/images/1001.jpeg' },
        { id: 30, name: '华二', avatar: '../../src/assets/images/1001.jpeg' }
      ],
      sphereRadius: 250, // 球体半径 (放大一倍，原来是210)
      animationId: null // 动画ID
    }
  },
  methods: {
    closeRollCall() {
      this.$emit('close')
    },
    get3DAvatarPosition(index) {
      // 使用斐波那契螺旋法在球体表面分布点
      const N = this.students.length
      const inc = Math.PI * (3 - Math.sqrt(5)) // 黄金角
      const off = 2 / N
      
      const y = index * off - 1 + (off / 2)
      const r = Math.sqrt(1 - y * y)
      const phi = index * inc
      
      const x = Math.cos(phi) * r
      const z = Math.sin(phi) * r
      
      // 应用球体旋转
      const rotatedX = x * Math.cos(this.rotationY) - z * Math.sin(this.rotationY)
      const rotatedZ = x * Math.sin(this.rotationY) + z * Math.cos(this.rotationY)
      const rotatedY = y * Math.cos(this.rotationX) - rotatedZ * Math.sin(this.rotationX)
      
      // 计算最终位置和缩放
      const scale = (rotatedZ + 2) / 3 // 根据Z轴位置调整缩放，实现近大远小效果
      const opacity = (rotatedZ + 1.5) / 2.5 // 根据Z轴位置调整透明度
      
      return {
        transform: `translate3d(${rotatedX * this.sphereRadius}px, ${rotatedY * this.sphereRadius}px, ${rotatedZ * this.sphereRadius}px) scale(${scale})`,
        opacity: opacity,
        zIndex: Math.floor((rotatedZ + 1) * 10) // 根据Z轴位置调整层级
      }
    },
    selectRandomStudents() {
      if (this.selectedCount <= 0 || this.selectedCount > this.students.length) {
        alert(`请选择1到${this.students.length}之间的数字`)
        return
      }
      
      this.isSelecting = true
      
      // 模拟抽取动画
      setTimeout(() => {
        // 随机抽取指定数量的学生
        const shuffled = [...this.students].sort(() => 0.5 - Math.random())
        this.selectedStudents = shuffled.slice(0, this.selectedCount)
        this.isSelecting = false
        this.showResult = true // 显示结果，隐藏球体
      }, 1500)
    },
    resetRollCall() {
      this.showResult = false
      this.selectedStudents = []
      // 重新开始旋转
      this.isSpinning = true
      this.animateSphere()
    },
    animateSphere() {
      if (!this.isSpinning) {
        if (this.animationId) {
          cancelAnimationFrame(this.animationId)
          this.animationId = null
        }
        return
      }
      
      this.rotationY += 0.01 // Y轴旋转速度
      this.rotationX = Math.sin(Date.now() / 5000) * 0.2 // X轴轻微摆动
      
      this.animationId = requestAnimationFrame(this.animateSphere)
    }
  },
  mounted() {
    // 组件挂载后开始旋转动画
    this.animateSphere()
  },
  beforeUnmount() {
    // 组件销毁前取消动画
    if (this.animationId) {
      cancelAnimationFrame(this.animationId)
    }
  }
}
</script>

<style scoped>
.roll-call-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  perspective: 1000px;
}

.roll-call-card {
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(26, 26, 46, 0.9));
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 800px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid #d4af37;
  backdrop-filter: blur(10px);
  text-align: center;
  position: relative;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid #d4af37;
  color: #d4af37;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: rgba(212, 175, 55, 0.4);
  transform: rotate(90deg);
}

.title {
  color: #d4af37;
  margin-top: 0;
  text-align: center;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  font-size: 2rem;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 15px;
  order: -1; /* 将标题移到顶部 */
}

.student-sphere-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  position: relative;
  height: 80vh;
}

.student-sphere {
  position: relative;
  width: 80vmin;
  height: 80vmin;
  max-width: 600px;
  max-height: 600px;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(0deg);
}

.student-avatar {
  position: absolute;
  width: 70px; /* 增大头像尺寸 */
  height: 70px; /* 增大头像尺寸 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10%; /* 减小圆角，使头像更接近正方形 */
}

.student-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 10%; /* 减小圆角，使头像更接近正方形 */
  object-fit: cover;
}

.student-avatar .student-name {
  font-size: 0.8rem;
  margin-top: 2px;
  font-weight: bold;
  color: #333;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-section {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(5px);
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-size: 1.2rem;
}

.count-input {
  padding: 8px 15px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-align: center;
  width: 80px;
  font-size: 1rem;
  margin-top: 10px;
}

.count-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.count-input:focus {
  outline: none;
  border-color: white;
  background: rgba(255, 255, 255, 0.3);
}

.select-btn {
  background: #ffd166;
  border: none;
  border-radius: 50px;
  color: #333;
  padding: 12px 30px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.select-btn:hover:not(:disabled) {
  background: #ffc44d;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.select-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.result-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.result-section h2 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.selected-students {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin: 30px 0;
}

.selected-student {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.selected-student img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

.selected-student .student-name {
  font-size: 1.5rem;
  margin-top: 15px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.reset-btn {
  background: #06d6a0;
  border: none;
  border-radius: 50px;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}

.reset-btn:hover {
  background: #05b88f;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
</style>